<template>
  <div>
    <!-- table -->
    <a-card style="overflow: scroll;">
      <a-table
        :columns="columns"
        :dataSource="data"
        :pagination="false"
        style="width:100%;"
        :loading="memberLoading"
      >
        <template slot="info" slot-scope="text, record">
          <template>
            <div v-if="text">
              <a-popover v-if="record.type == 1" title="$t('verifyBind.yhxx')" placement="left" trigger="click">
                <ul slot="content">
                  <li class="douyin-bind-img"><img :src="text.avatar_168x168.url_list[0]" alt=""></li>
                  <li>
                    $t('verifyBind.gz'): {{text.following_count}}
                    $t('verifyBind.fs'): {{text.follower_count}}
                    $t('verifyBind.hz'): {{text.total_favorited}}
                    $t('verifyBind.zp'): {{text.aweme_count}}
                  </li>
                  <li>$t('verifyBind.c'): {{text.nickname}}</li>
                  <li>$t('verifyBind.dyh'): {{text.short_id}}</li>
                  <li>{{ $t('verifyBind.xb') }}:
                    <span v-if="text.gender==1">{{ $t('verifyBind.n') }}</span>
                    <span v-else-if="text.gender==2">{{ $t('verifyBind.n') }}</span>
                    <span v-else>{{ $t('verifyBind.wsz') }}</span>
                  </li>
                  <li>$t('verifyBind.sr'): {{text.birthday}}</li>
                  <li>$t('verifyBind.qm'): {{text.signature}}</li>
                  <li>$t('verifyBind.gj'): {{text.country}}</li>
                  <li>$t('verifyBind.wz'): {{text.location}}</li>
                  <li>$t('verifyBind.xx'): {{text.school_name}}</li>
                </ul>
                <a-button type="primary">{{ $t('verifyBind.ck') }}</a-button>
              </a-popover>
            </div>
            <div v-else>-</div>
          </template>
        </template>
        <template slot="imgs" slot-scope="text">
          <template>
            <div v-if="text">
              <img v-for="item in text.split(',')" @click="handleClickReview($hostServer+item)" class="table-img" :src="$hostServer+item" alt=""/>
            </div>
            <div v-else>-</div>
          </template>
        </template>
        <template slot="operation" slot-scope="text, record">
          <a v-if="!loadingCheck" style="color:blue;" @click="handleClickCheck(record)">{{ $t('verifyBind.jc') }}</a>
          <span v-else>-</span>
          <a-divider type="vertical" />
          <span v-if="record.status != 1">
            <span v-if="record.info">
            <a @click="handleClickVerifySucc(record.id)">{{ $t('verifyBind.tg') }}</a>
            <a-divider type="vertical" />
            </span>
            <a style="color:red;" @click="handleClickVerifyFail(record.id)">{{ $t('verifyBind.jj') }}</a>
          </span>
          <div>
            <span v-if="record.status == 1">
              {{ $t('verifyBind.dqzs') }}: <b style="color:green;">{{ $t('verifyBind.yrz') }}👌</b>
            </span>
            <span v-else-if="record.status == -1">
              {{ $t('verifyBind.dqzs') }}: <b style="color:red;">{{ $t('verifyBind.yjj') }}😅</b>
            </span>
            <span v-else>
              {{ $t('verifyBind.dqzs') }}: <b>{{ $t('verifyBind.wrz') }}</b>
            </span>
          </div>
        </template>
      </a-table>
    </a-card>
    <a-modal title="$t('verifyBind.jjyy')" v-model="showInputDialog" @ok="handleInputDialogOk">
      <p>
        <a-input v-model="refuse_content" placeholder="$t('verifyBind.qsr')..." />
      </p>
    </a-modal>
    <DialogImg :img_url="curr_img_url" :is_show="curr_img_show"/>
  </div>
</template>

<script>
import { mixin, mixinDevice } from '@/utils/mixin'
import DialogImg from '../../components/DialogImg'

export default {
  name: 'Bind',
  mixins: [mixin, mixinDevice],
  components: {
    DialogImg
  },
  data () {
    return {
      curr_img_url: '',
      curr_img_show: false,
      description: this.$t('verifyBind.wxdyhswsks'),
      loading: false,
      memberLoading: false,
      curr_id: '',
      // table
      columns: [
        {
          title: this.$t('verifyBind.sszh'),
          dataIndex: 'from_username',
          key: 'from_username',
          scopedSlots: { customRender: 'from_username' }
        },
        {
          title: this.$t('verifyBind.bdlx'),
          dataIndex: 'type_text',
          key: 'type_text',
          scopedSlots: { customRender: 'type_text' }
        },
        {
          title: this.$t('verifyBind.zh'),
          dataIndex: 'username',
          key: 'username',
          scopedSlots: { customRender: 'username' }
        },
        {
          title: this.$t('verifyBind.shtp'),
          dataIndex: 'imgs',
          key: 'imgs',
          scopedSlots: { customRender: 'imgs' }
        },
        {
          title: this.$t('verifyBind.zhxx'),
          dataIndex: 'info',
          key: 'info',
          scopedSlots: { customRender: 'info' }
        },
        {
          title: this.$t('verifyBind.cz'),
          key: 'action',
          scopedSlots: { customRender: 'operation' }
        }
      ],
      data: [],
      errors: [],
      showBindInfo: false,
      loadingCheck: false,
      refuse_content: '',
      showInputDialog: false
    }
  },
  created () {
    this.getList()
  },
  methods: {
    handleClickHideBindInfo () {
      this.showBindInfo = false
    },
    handleInputDialogOk () {
      this.showInputDialog = false
      this.$http.post('/verify/bind_account_fail', this.$qs.stringify({
        id: this.curr_id,
        content: this.refuse_content
      })).then(res => {
        if (res.code === 0) {
          this.$notification.success({
            message: this.$t('verifyBind.cg'),
            description: res.msg
          })
          this.getList()
        } else {
          this.$notification.error({
            message: this.$t('verifyBind.sb'),
            description: res.msg
          })
        }
      }).catch(err => {
        this.$notification.error({
          message: this.$t('verifyBind.sb'),
          description: err.message
        })
      })
    },
    getList () {
      this.$http.get('/verify/bind_list').then(res => {
        this.data = res
      }).catch(err => {
        this.$notification.error({
          message: this.$t('verifyBind.sb'),
          description: err.message
        })
      })
    },
    handleSubmit (e) {
      e.preventDefault()
    },
    handleClickCheck (row) {
      this.loadingCheck = true
      this.$http.post('/verify/bind_check', this.$qs.stringify({
        id: row.id,
        type: row.type,
        username: row.username
      })).then(res => {
        if (res.code === 0) {
          this.$notification.success({
            message: this.$t('verifyBind.cg'),
            description: res.msg
          })
          this.getList()
        } else {
          this.$notification.error({
            message: this.$t('verifyBind.sb'),
            description: res.msg
          })
        }
      }).catch(err => {
        this.$notification.error({
          message: this.$t('verifyBind.sb'),
          description: err.message
        })
      }).then(() => {
        this.loadingCheck = false
      })
    },
    handleClickVerifySucc (id) {
      this.$http.post('/verify/bind_account_succ', this.$qs.stringify({
        id: id
      })).then(res => {
        if (res.code === 0) {
          this.$notification.success({
            message: this.$t('verifyBind.cg'),
            description: res.msg
          })
          this.getList()
        } else {
          this.$notification.error({
            message: this.$t('verifyBind.sb'),
            description: res.msg
          })
        }
      }).catch(err => {
        this.$notification.error({
          message: this.$t('verifyBind.sb'),
          description: err.message
        })
      })
    },
    handleClickVerifyFail (id) {
      this.curr_id = id
      this.showInputDialog = true
    },
    handleClickReview (url) {
      this.curr_img_url = url
      this.curr_img_show = !this.curr_img_show
    }
  }
}
</script>

<style lang="less" scoped>
  .table-img{
    max-width: 100px;
    max-height: 100px;
    margin-right:10px;
    margin-bottom:5px;
    border:thin dashed #ccc;
    padding:5px;
  }
  .card{
    margin-bottom: 24px;
  }
  .popover-wrapper {
    /deep/ .antd-pro-pages-forms-style-errorPopover .ant-popover-inner-content {
      min-width: 256px;
      max-height: 290px;
      padding: 0;
      overflow: auto;
    }
  }
  .antd-pro-pages-forms-style-errorIcon {
    user-select: none;
    margin-right: 24px;
    color: #f5222d;
    cursor: pointer;
    i {
          margin-right: 4px;
    }
  }
  .antd-pro-pages-forms-style-errorListItem {
    padding: 8px 16px;
    list-style: none;
    border-bottom: 1px solid #e8e8e8;
    cursor: pointer;
    transition: all .3s;

    &:hover {
      background: #e6f7ff;
    }
    .antd-pro-pages-forms-style-errorIcon {
      float: left;
      margin-top: 4px;
      margin-right: 12px;
      padding-bottom: 22px;
      color: #f5222d;
    }
    .antd-pro-pages-forms-style-errorField {
      margin-top: 2px;
      color: rgba(0,0,0,.45);
      font-size: 12px;
    }
  }
  ul{
    list-style: none;
    padding:0;
  }
  .douyin-bind-img{
    margin-bottom:10px;
    text-align: center;
  }
  .douyin-bind-img img{
    width:100px;
    height:100px;
    border-radius: 50%;
  }
</style>
